<template>
    <div>
        <div class="w-full">
            <recommended-top-bar top-bar-name="新碟上架">
            </recommended-top-bar>
            <div>
                <swiper
                    :slidesPerView="5"
                    :centeredSlides="true"
                    :spaceBetween="30"
                    :pagination="{type: 'fraction',}"
                    :navigation="true"
                    :virtual="true"
                >
                    <swiper-slide
                        v-for="(item, index) in albumArr.slice(0, 100)"
                        :key="index"
                        :virtualIndex="index"
                        class="flex justify-center items-center"
                    >
                        <div class="relative"
                             @click="getRouterToAlbumList(item.id)">
                            <n-image
                                width="150"
                                :src="item.picUrl"
                                object-fit="cover"
                                :style="{ border: '1px solid #999999', boxShadow: '0 5px 50px #999999'}"
                            />
                            <p class="hover:underline cursor-pointer" :title="item.name">{{ calString(item.name, 10) }}</p>
                            <p :title="item.artist.name" :style="{color: '#999999'}">{{ calString(item.artist.name, 10)}}</p>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>
<script>
import RecommendedTopBar from "@/views/recommend/RecommendedTopBar";
import {Swiper, SwiperSlide} from 'swiper/vue';
import {NImage} from 'naive-ui';
// Import Swiper styles
import 'swiper/swiper.scss';

import 'swiper/components/pagination/pagination.min.css';
import 'swiper/components/navigation/navigation.min.css';

// import Swiper core and required modules
import SwiperCore, {Pagination, Navigation, Virtual} from 'swiper/core';
import {onBeforeMount, ref} from "vue";
import {getAlbum} from "@/network/song/album-list";
import {useRouter} from "vue-router";

// install Swiper modules
SwiperCore.use([Pagination, Navigation, Virtual]);

import {calString} from "@/util/cal";

export default {
    name: 'NewDiscRecommended',
    components: {
        Swiper,
        SwiperSlide,
        RecommendedTopBar,
        NImage
    },
    setup() {
        const albumArr = ref([]);
        const router = useRouter();
        const getRouterToAlbumList = (id) => {
            router.push({
                path: '/album',
                query: {id}
            });
        }
        onBeforeMount(() => {
            getAlbum(30, 0).then(res => {
                albumArr.value = res.data.weekData;
            })
        })
        return {
            albumArr,
            getRouterToAlbumList,
            calString
        }
    }
};
</script>
<style lang="scss" scoped>
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-container {
    width: 100%;
    height: 300px;
    margin: 20px auto;
}

</style>